{% extends 'base.html' %}
{% block title %}
    发布文章
{% endblock %}
{% block head %}
    <link href="{% static 'wangEditor/style.css' %}" rel="stylesheet">
    <script src="{% static 'wangEditor/index.js' %}"></script>
    <script type="module"  src="{% static 'js/post.js' %}"></script>
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            border-radius: 4px;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container bg-white p-3 rounded mt-3">
        <h1>发布文章</h1>
        <div class="mt-3">
            <form action="" method="post">
                {% csrf_token %}
                <div class="form-group mb-3">
                    <label class="form-label" for="title">标题</label>
                    <input type="text" class="form-control" id="title" name="title" placeholder="请输入文章标题">
                </div>
                <div class="form-group mb-3">
                    <label class="form-label" for="desc">分类</label>
                    <select class="form-select" name="category" id="category">
                        {% for category in categories %}
                            <option value="{{ category.id }}">{{ category.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group mb-3">
                    <label class="form-label" for="content">内容</label>
                    <div id="editor—wrapper">
                        <div id="toolbar-container"><!-- 工具栏 --></div>
                        <div id="editor-container"><!-- 编辑器 --></div>
                    </div>
                </div>
                <div class="mb-3 text-end">
                    <button type="submit" class="btn btn-primary mt-3" id="post-btn">发布文章</button>

                </div>

            </form>
        </div>

    </div>
{% endblock %}